<template>
  <view class="u-page">
    <u--form labelPosition="top" labelWidth="100%" :labelStyle="labelStyle" :model="form" :rules="rules" ref="form">
      <u-form-item label="集资参与人银行卡正面" prop="bankCardPositiveUrl" v-if="oneself">
        <u-upload
          accept="image"
          capture="['album', 'camera']"
          width="360"
          height="240"
          name="bankCardPositiveUrl"
          maxCount="1"
          :fileList="bankCardPositiveUrl"
          @afterRead="uploadFile($event, atterUploadCardPositive)"
          @delete="deleteFile($event, atterDeleteFile)"
        >
          <image src="../../static/card-bank.jpg" mode="widthFix" class="card-img"></image>
        </u-upload>
      </u-form-item>
      <u-form-item label="继承权利人银行卡正面" prop="bankCard1PositiveUrl" v-if="!oneself">
        <u-upload
          accept="image"
          capture="['album', 'camera']"
          width="360"
          height="240"
          name="bankCard1PositiveUrl"
          maxCount="1"
          :fileList="bankCard1PositiveUrl"
          @afterRead="uploadFile($event, atterUploadCard1Positive)"
          @delete="deleteFile($event, atterDeleteFile)"
        >
          <image src="../../static/card-bank.jpg" mode="widthFix" class="card-img"></image>
        </u-upload>
      </u-form-item>
      <u-form-item label="集资参与人银行卡号" prop="bankCardNo" v-if="oneself">
        <u--input v-model="form.bankCardNo" required placeholder="请输入集资参与人银行卡号" clearable></u--input>
      </u-form-item>
      <u-form-item label="继承权利人银行卡号" prop="bankCard1No" v-if="!oneself">
        <u--input v-model="form.bankCard1No" required placeholder="请输入继承权利人银行卡号" clearable></u--input>
      </u-form-item>
      <u-form-item label="联系电话" prop="contactNumber">
        <u--input v-model="form.contactNumber" required placeholder="请输入联系电话" clearable></u--input>
      </u-form-item>
      <u-form-item label="集资票据" prop="bills">
        <u-upload
          accept="image"
          capture="['album', 'camera']"
          width="360"
          height="240"
          name="bills"
          :fileList="bills"
          @afterRead="uploadFile($event, atterUploadMutiFile)"
          @delete="deleteFile($event, atterDeleteMutiFile)"
        >
          <image src="../../static/card-bill.png" mode="widthFix" class="card-img"></image>
        </u-upload>
      </u-form-item>
      <u-form-item class="mt-4">
        <u-row class="w-100" justify="center">
          <u-col span="5" justify="center">
            <u-button shape="circle" @click="toPreYxPage"><view>上一步</view></u-button>
          </u-col>
          <u-col span="1"></u-col>
          <u-col span="5" justify="center">
            <u-button type="primary" shape="circle" @click="confirm"><view>下一步</view></u-button>
          </u-col>
        </u-row>
      </u-form-item>
    </u--form>
    <u-row class="mt-4">
      <u-col span="12"><uni-steps :options="stepList" :active="currentStepIndex"></uni-steps></u-col>
    </u-row>
  </view>
</template>

<script>
import { checkPhone } from '@/util/validate.js';
import { baseFont, yxStepKey } from '@/common/config.js';
import { getAccessToken, bankCardOCR } from '@/common/baiduApi.js';
import { pathToBase64 } from 'image-tools';

export default {
  data() {
    return {
      // preStep: 'step1',
      currentStep: yxStepKey.step2,
      nextStep: yxStepKey.step3,
      labelStyle: { fontSize: baseFont + 'upx', marginBottom: '20upx' },
      form: {
        bankCardPositiveUrl: '',
        bankCard1PositiveUrl: '',
        bankCardNo: '',
        bankCard1No: '',
        bills: [],
        contactNumber: '',
      },
      rules: {
        bankCardPositiveUrl: {
          type: 'string',
          required: true,
          message: '请上传银行卡正面',
          trigger: ['blur'],
        },
        bankCard1PositiveUrl: {
          type: 'string',
          required: true,
          message: '请上传银行卡正面',
          trigger: ['blur'],
        },
        bankCardNo: {
          type: 'string',
          required: true,
          message: '请填写银行卡号',
          trigger: ['blur'],
        },
        bankCard1No: {
          type: 'string',
          required: true,
          message: '请填写银行卡号',
          trigger: ['blur'],
        },
        bills: {
          type: 'array',
          required: true,
          min: 1,
          message: '请上传票据',
          trigger: ['change'],
        },
        contactNumber: [
          {
            type: 'string',
            required: true,
            message: '请填写联系电话',
            trigger: ['blur', 'change'],
          },
          { validator: checkPhone, trigger: ['blur', 'change'] },
        ],
      },
      bankCardPositiveUrl: [],
      bankCard1PositiveUrl: [],
      bills: [],
    };
  },
  onLoad(options) {
    this.checkYxPage(options);
    this.imageBackShow(['bankCardPositiveUrl', 'bankCard1PositiveUrl', 'bankCardNo', 'bankCard1No', 'contactNumber']);
    this.mutiImageBackShow(['bills']);
  },
  computed: {
    preStep() {
      return this.oneself ? yxStepKey.step1 : yxStepKey.step1_5;
    },
    currentStepIndex() {
      return this.oneself ? 1 : 2;
    }
  },
  methods: {
    confirm() {
      this.$refs.form.validate().then(res => {
        this.toNextYxPage(this.idCard);
      });
    },
    async atterUploadCardPositive(fileList) {
      this.form.bankCardPositiveUrl = fileList[0].url;
      this.$refs.form.validateField('bankCardPositiveUrl');
      const imageBase64 = await pathToBase64(fileList[0].thumb);
      const accessToken = await getAccessToken();
      const { data } = await bankCardOCR(imageBase64.replace(/^data:image\/\w+;base64,/, ''), accessToken);
      const bankCardNo = data.result.bank_card_number;
      // 识别出证件保存
      if (this.form.bankCardNo === '' && bankCardNo !== '') {
        this.form.bankCardNo = bankCardNo;
        this.$refs.form.validateField('bankCardNo');
      }
      uni.hideLoading();
    },
    async atterUploadCard1Positive(fileList) {
      this.form.bankCard1PositiveUrl = fileList[0].url;
      this.$refs.form.validateField('bankCard1PositiveUrl');
      const imageBase64 = await pathToBase64(fileList[0].thumb);
      const accessToken = await getAccessToken();
      const { data } = await bankCardOCR(imageBase64.replace(/^data:image\/\w+;base64,/, ''), accessToken);
      const bankCard1No = data.result.bank_card_number;
      // 识别出证件保存
      if (this.form.bankCard1No === '' && bankCard1No !== '') {
        this.form.bankCard1No = bankCard1No;
        this.$refs.form.validateField('bankCard1No');
      }
      uni.hideLoading();
    },
  },
};
</script>

<style scoped lang="scss"></style>
